<template lang="html">
    <div id="nows">
        <!-- 轮播 -->
        <div class="nows_swipe" v-if="loading">
            <mt-swipe :auto="4000" :show-indicators="true">
                <mt-swipe-item v-for="item in swiper_movies" ><img :src="item.cover.origin" v-on:click="gotodetails(item.id)" class="cover"/></mt-swipe-item>
            </mt-swipe>
        </div>
        <!-- loading -->
        <div v-if="!loading" class="loading_show">
                <mt-spinner type="fading-circle" :size="100" color="#ff7ba0"></mt-spinner>
        </div>
        <!-- movies -->
        <div class="film_list">
            <div class="film_item clearfix"  v-for="item in movies" v-on:click="gotodetails(item.id)">
                <div class="item_cover fl"><img :src="item.poster.origin"></div>
                <div class="film_score fr">
                    <span class="score">{{item.grade}}</span>
                    <div class="buy_now">
                        购票
                    </div>
                </div>
                <div class="film_info">
                    <div class="film_name">
                        {{item.name}}
                    </div>
                    <div class="film_intro">
                        {{item.intro}}
                    </div>
                    <div class="counts">
                        <span class="counts_num">{{item.cinemaCount}}</span>
                        <span class="counts_cinema">家影院上映</span>
                        <span class="counts_num">{{item.watchCount}}</span>
                        <span>人购票</span>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
// 引入axios插件
import axios from "axios";
export default {
    data: function() {
        return {
            get_count: 6,
            swiper_movies: [],
            top_cover: [],
            movies: [],
            movies_id: "",
            loading: false,
        }
    },
    created() {
        var that = this;

        // 当index被引入渲染时，就开始发起请求
        axios({
            url: "https://m.maizuo.com/v4/api/film/now-playing",
            methods: "get",
            data: {
                count: that.get_count,
            }
        }).then(function(res) {
            that.loading = true;
            that.movies = res.data.data.films;
            for (var i = 0; i < 5; i++) {
                that.swiper_movies.push(res.data.data.films[i]);
            }
        }).catch(function(err) {
            console.warn(err);
        })
    },
    mounted() {
        window.addEventListener('scroll', this.get_more)
    },

    destroyed() {
        window.removeEventListener('scroll', this.get_more)
    },
    methods: {
        gotodetails: function(movies_id) {
            var that = this;
            that.movies_id = movies_id;
            // console.log(that.movies_id);
            this.$router.push({
                path: 'details',
                query: {
                    id: that.movies_id
                }
            })
        },
        get_more: function() {

            var that = this;
            if(that.get_count<37){
            that.get_count += 1;
            // 滚动获取新的电影信息
            axios.get("https://m.maizuo.com/v4/api/film/now-playing", {
                params: {
                    count: that.get_count,
                }
            }).then(function(res) {
                // console.log(res);
                that.movies = res.data.data.films;

                // console.log(res);
            })
            }

            
        }
    }
}
</script>

<style lang="scss">
// 引入其他 scss
@import "../scss/_reset.scss";
// 直接编写scss
@font-face {
    font-family: 'iconfont';
    /* project id 541017 */
    src: url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.eot");
    src: url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.eot?#iefix") format('embedded-opentype'), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.woff") format('woff'), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.ttf") format('truetype'), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.svg#iconfont") format('svg');
}
.iconfont {
    font-family: "iconfont";
    color: black;
    font-size: 10px;
    font-style: normal;
}

#nows {
    .nows_swipe {
        height: 31vh;
        .cover {
            width: 100vw;
            height: 100%;
        }
    }
 

}
</style>
